<!doctype html>  
<html>
<head>
<meta charset="utf-8"/>
<title> 砸蛋礼物   -- 纯js技术</title> 
<link  rel="stylesheet" href="css/index.css"/>
<script type="text/javascript" src="js/jquery-2.1.0.min.js"></script> 
<script type="text/javascript">
    var index=4;
	var topi = -190;
	var bo = true;
	function blurr(obj){
	
		if(bo){
			timeRun('document.getElementById("tip")');
			bo=false;
		}
		
		obj.style.background="url(images/test1.png) no-repeat -193px 20px";
		index--;
		if(index<=0){
		setTimeout('nextFunction()',1000);
		
		}
			obj.onclick="";
	}
	function nextFunction(){
		var ti = document.getElementsByClassName("div1");
		for(var i = 0;i<4;i++){
			ti[i].style.background="url(images/test2.png) no-repeat 0px 20px";
		}
		setTimeout('downRun()',1000);
	}
	function downRun(){
		document.getElementById("content").style.opacity="0.4";
		setTimeout('document.getElementById("content").style.opacity="0.7";',800);
		setTimeout('document.getElementById("content").style.opacity="1";',1880);
		timeRun('document.getElementById("content2")');
		setTimeout('playMusic()',950);
	}
	 	
	function playMusic(){
		document.getElementById("content2").innerHTML=""
		document.getElementById("music").src="music/circulation.mp3";
		document.getElementById("gril").style.opacity="0.4";
		document.getElementById("boy").style.opacity="0.4";
		setTimeout('document.getElementById("boy").style.opacity="0.7";document.getElementById("gril").style.opacity="0.7";',200);
		setTimeout('document.getElementById("boy").style.opacity="1";document.getElementById("gril").style.opacity="1";',500);
		
		setTimeout('document.getElementById("header").style.opacity="0.4";',100);
		setTimeout('document.getElementById("header").style.opacity="0.8";',200);
		setTimeout('document.getElementById("header").style.opacity="1";',400);
		
	}
	
	var arr = new Array(7);
	arr[0] = "0"
	arr[1] = "-140"
	arr[2] = "-290"
	arr[3] = "-430"
	arr[4] = "-590"
	arr[5] = "-920"
	arr[6] = "-140"
	function runGril(){
	var num = Math.floor(Math.random()*8);
	document.getElementById("gril").style.background="url(images/girl.png) no-repeat "+arr[num]+"px 0px";
		
	}
	setInterval("runGril()",1400)
	
	function timeRun(obj){
		setTimeout(obj+'.style.opacity="0.9"',0);
		setTimeout(obj+'.style.opacity="0.8"',100);
		setTimeout(obj+'.style.opacity="0.7"',200);
		setTimeout(obj+'.style.opacity="0.6"',300);
		setTimeout(obj+'.style.opacity="0.55"',500);
		setTimeout(obj+'.style.opacity="0.5"',600);
		setTimeout(obj+'.style.opacity="0.35"',700);
		setTimeout(obj+'.style.opacity="0"',800);
	}
	
	//---下雪---
	(function($){
	$.fn.snow = function(options){
	var $flake = $('<div id="snowbox" />').css({'position': 'absolute','z-index':'9999', 'top': '-50px'}).html('❀'),
	documentHeight 	= $(document).height(),
	documentWidth	= $(document).width(),
	defaults = {
		minSize		: 10,
		maxSize		: 20,
		newOn		: 1000,
		flakeColor	: "" /* 此处可以定义雪花颜色，若要白色可以改为#FFFFFF */
	},
	options	= $.extend({}, defaults, options);
	var interval= setInterval( function(){
	var startPositionLeft = Math.random() * documentWidth - 100,
	startOpacity = 0.5 + Math.random(),
	sizeFlake = options.minSize + Math.random() * options.maxSize,
	endPositionTop = documentHeight - 200,
	endPositionLeft = startPositionLeft - 500 + Math.random() * 500,
	durationFall = documentHeight * 10 + Math.random() * 5000;
	$flake.clone().appendTo('header').css({
		left: startPositionLeft,
		opacity: startOpacity,
		'font-size': sizeFlake,
		color:Math.floor(Math.random()*100)%2==0?(Math.floor(Math.random()*100)%2==0?'#f00':'#0f3'):Math.floor(Math.random()*100)%2==0?'#f0f':'#00f'// options.flakeColor 这里可以改变颜色
	}).animate({
		top: endPositionTop,
		left: endPositionLeft,
		opacity: 0.2
	},durationFall,'linear',function(){
		$(this).remove()
	});
	}, options.newOn);
    };
})(jQuery);
$(function(){
    $.fn.snow({ 
	    minSize: 10, /* 定义雪花最小尺寸 */
	    maxSize: 30,/* 定义雪花最大尺寸 */
	    newOn: 300  /* 定义密集程度，数字越小越密集 */
    });
});

</script>

</head>

<body>
<header id="header"></header>
<!-- <bgsound src="music/circulation.mp3"/> -->
<!-- <audio src="music/circulation.mp3"/> --><center>
<div id="tip"></div>
<div id="content">&nbsp;生&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;日&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;快&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;乐</div>

<div id="content2">
<div class="div1" onclick="blurr(this)"></div>
<div class="div1" onclick="blurr(this)"></div>
<div class="div1" onclick="blurr(this)"></div>
<div class="div1" onclick="blurr(this)"></div>
</div>

<div style="position:fixed;z-index:6;margin:-20px 0px 0px 400px;">
<div id="gril"></div>
<div id="boy"></div>
</div>
<audio src="" style="opacity:0" id="music" autoplay loop="loop">
</audio>

</body>
</html>